<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      crud.options.tableType="vxe-table"
    >
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button
            size="small"
            v-permission="'Create'"
            type="primary"
            @click="addRow"
            ><i class="el-icon-plus" /> 新增</el-button
          >
        </el-button-group>
        <crud-toolbar
          :search.sync="crud.searchOptions.show"
          :compact.sync="crud.pageOptions.compact"
          :columns="crud.columns"
          @refresh="doRefresh()"
          @columns-filter-changed="handleColumnsFilterChanged"
        />
      </div>
      <template slot="package_priceFormSlot" slot-scope="scope">
        <div v-for="(item,index) in scope.form.package_price" :key="index" style="margin-bottom: 10px" class="package_price">
          <el-row>
            <el-col :span="8">
              <el-input
                placeholder="请输入内容"
                v-model="item.number"
                class="input-with-select"
                size="small" type="number"
                :disabled="item.time_unit==='永久'"
              >
                <el-select v-model="item.time_unit" slot="append" placeholder="请选择" @change="()=>{ if (item.time_unit === '永久') item.number = 1}">
                  <el-option label="日" value="日"></el-option>
                  <el-option label="个月" value="个月"></el-option>
                  <el-option label="年" value="年"></el-option>
                  <el-option label="永久" value="永久"></el-option>
                </el-select>
              </el-input>
            </el-col>
            <el-col :span="8" :offset="2">
              <el-input-number placeholder="请输入内容" controls-position="right" size="small" v-model="item.price" :precision="2" :step="0.1" :min="0"></el-input-number> 元
            </el-col>
            <el-col :span="3" :offset="1">
              <el-button @click.prevent="removePackagePrice(scope.form, index)" type="danger" size="mini">删除</el-button>
            </el-col>
          </el-row>
        </div>
        <el-col :span="12" v-show="scope.mode==='add'||scope.mode==='edit' ">
          <el-button type="primary" @click="addPackagePrice(scope.form)" size="small">新增</el-button>
        </el-col>
      </template>
      <template slot="package_priceSlot" slot-scope="scope">
        <el-popover
          placement="right"
          width="200"
          trigger="hover">
          <div v-for="(item,index) in scope.row['package_price']" :key="index">
            {{item.number }} {{item.time_unit}} ￥{{item.price}}
          </div>
          <el-button type="primary" plain size="mini" slot="reference"><span> {{ getPriceRange(scope.row['package_price']) }} 元</span></el-button>
        </el-popover>
      </template>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import * as api from './api'
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import XEUtils from 'xe-utils'

export default {
  name: 'PackageManage',
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      allMenu: [],
      allDisabledMenu: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created () {
    this.getMenuList()
  },
  methods: {
    getCrudOptions  () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return api.GetList(query)
    },
    addRequest (row) {
      console.log(11, row.features_menu)
      return api.createObj(row)
    },
    updateRequest (row) {
      return api.UpdateObj(row)
    },
    delRequest (row) {
      return api.DelObj(row.id)
    },
    getMenuList () {
      api.GetMenuList().then((ret) => {
        this.allMenu = XEUtils.toArrayTree(ret.data.data || ret.data, { parentKey: 'parent', strict: false })
        const data = ret.data.data || ret.data
        this.allDisabledMenu = XEUtils.toArrayTree(JSON.parse(JSON.stringify(data)).map(val => { val.disabled = true; return val }), { parentKey: 'parent', strict: false })
      })
    },
    handleCheckClick (row) {
      row.features_menu = this.$refs.menuTree.getCheckedNodes(false, true).map(val => { return val.id })
    },
    addPackagePrice (form) {
      if (!form.package_price) {
        form.package_price = []
      }
      form.package_price.push({ time_unit: '日', number: 1, price: 100 })
    },
    removePackagePrice (form, index) {
      form.package_price.splice(index, 1)
    },
    // 获取价格范围
    getPriceRange (data) {
      const prices = data.map(item => item.price)
      const minPrice = Math.min(...prices)
      const maxPrice = Math.max(...prices)
      return (minPrice === maxPrice) ? minPrice.toString() : `${minPrice} ~ ${maxPrice}`
    }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
.package_price .el-select .el-input {
  width: 90px;
}
.package_price .el-input__inner {
  height: 36px;
}
.package_price .el-input-group__append .el-select{
  margin: -10px 0px!important;
}
</style>
